<template>
    <div class="outer">
    <h1>加入购物车的半场动画</h1>
    <button @click="isShow = !isShow">加入购物车</button>
    <transition
      name="one"
      @before-enter="oneBeforeEnter"
      @enter="oneEnter"
      @after-enter="oneAfterEnter"
    >
      <div class="text" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
    name : 'AddCart',

    data (){
        return {
            idShow: false,
        }
    },

    methods :{
        oneBeforeEnter(el){
            el.style.transform = 'translate(0,0)'
        },

        oneBeforeEnter(el,done) {
            el.offsetLeff;

            el.style.transdorm = "translate(340px,300px)";

           el.style.transition = 'all  1s  linesr' 

           done()
        },

      oneAfterEnter()  {
        this.isShow = !this.isShow;
      }
    }
}
</script>

<style>

</style>